<template>
	<div class="panel-collapse" v-if="option.child&&option.child.length>0">
		<div class="panel-collapse-title" @click="handleCollapse">
			<span>{{option.title}}</span>
			<svg v-if="show&&option.child.length>0" t="1661753597377" class="icon" viewBox="0 0 1024 1024" p-id="2935"
				width="14" height="14">
				<path
					d="M512 714.666667c-8.533333 0-17.066667-2.133333-23.466667-8.533334l-341.333333-341.333333c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l320 317.866667 317.866667-320c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L533.333333 704c-4.266667 8.533333-12.8 10.666667-21.333333 10.666667z"
					p-id="2936" fill="#bfbfbf"></path>
			</svg>
			<svg v-else t="1661753559186" class="icon" viewBox="0 0 1024 1024" p-id="2613" width="14" height="14">
				<path
					d="M320 885.333333c-8.533333 0-17.066667-4.266667-23.466667-10.666666-12.8-12.8-10.666667-34.133333 2.133334-44.8L654.933333 512 298.666667 194.133333c-12.8-10.666667-14.933333-32-2.133334-44.8 10.666667-12.8 32-14.933333 44.8-2.133333l384 341.333333c6.4 6.4 10.666667 14.933333 10.666667 23.466667 0 8.533333-4.266667 17.066667-10.666667 23.466667l-384 341.333333c-6.4 6.4-12.8 8.533333-21.333333 8.533333z"
					p-id="2614" fill="#bfbfbf"></path>
			</svg>
		</div>
		<div class="panpel-collapse-content" v-if="show">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			option: {
				type: Object
			},
			count: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				show: false
			}
		},
		watch: {
			count: {
			  deep: true,
			  handler(val) {
				  this.show = false;
			  },
			},
		},
		methods: {
			// 展开属性页
			handleCollapse() {
				this.show = !this.show
				this.$emit("change", this.option)
			},
		}
	}
</script>

<style scoped lang="scss">
	.panel-collapse {
		width: 100%;

		.panel-collapse-title {
			width: 100%;
			height: 36px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 16px;
			padding-right: 4px;
			border-bottom: 1px solid rgb(219, 219, 219);
			line-height: 36px;
			// color: $fontColor;
			font-size: 12px;
			color: var(--font-color);
		}

		.panpel-collapse-content {
			width: 100%;
			border-bottom: 1px solid rgb(219, 219, 219);
			padding: 4px;
			transition: all 0.58s ease;

			.component-item {
				width: 100%;
				height: 70px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: rgb(247, 247, 247);
				// color: $fontColor;
				border-radius: 4px;
				cursor: pointer;

				&:active {
					cursor: grabbing;
				}
			}

			.component-icon {
				font-size: 24px;
				// color: $fontColor;
			}

			.component-item-title {
				margin: 6px auto;
				width: 100%;
				font-size: 12px;
				text-align: center;
				// color: $fontColor;
			}
		}
	}
</style>
